<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>drawer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="drawer">
        <div class="drawer-item">
            <div class="drawer-item__inside" style="background-color:#f2c074">
                <div class="drawer-item__inside--left">FIRST</div>
                <div class="drawer-item__inside--center">01</div>
                <div class="drawer-item__inside--right">我们的目标不仅仅是客户满意，而且让演示实现最佳的效果</div>
            </div>
            <div class="drawer-item__outside">
                <div class="drawer-item__outside--content" style="color: #f2c074;">效果至上</div>
            </div>
        </div>
        <div class="drawer-item">
            <div class="drawer-item__inside" style="background-color:#de7d7d">
                <div class="drawer-item__inside--left">SECOND</div>
                <div class="drawer-item__inside--center">02</div>
                <div class="drawer-item__inside--right">超越客户的期望1分，超越行业潮流1分，超越我们的服务极限1分</div>
            </div>
            <div class="drawer-item__outside">
                <div class="drawer-item__outside--content" style="color: #de7d7d;">满分103分</div>
            </div>
        </div>
        <div class="drawer-item">
            <div class="drawer-item__inside" style="background-color:#65b3c7">
                <div class="drawer-item__inside--left">THIRD</div>
                <div class="drawer-item__inside--center">03</div>
                <div class="drawer-item__inside--right">60分×100个=0</div>
            </div>
            <div class="drawer-item__outside">
                <div class="drawer-item__outside--content" style="color: #65b3c7;">杜绝平庸</div>
            </div>
        </div>
        <div class="drawer-item">
            <div class="drawer-item__inside" style="background-color:#684585">
                <div class="drawer-item__inside--left">FOURTH</div>
                <div class="drawer-item__inside--center">04</div>
                <div class="drawer-item__inside--right">每次服务，都要让内容迭代5%，让学员体验提升5%</div>
            </div>
            <div class="drawer-item__outside">
                <div class="drawer-item__outside--content" style="color: #684585;">5%迭代</div>
            </div>
        </div>
        <div class="drawer-item">
            <div class="drawer-item__inside" style="background-color:#3f7362">
                <div class="drawer-item__inside--left">FIFTH</div>
                <div class="drawer-item__inside--center">05</div>
                <div class="drawer-item__inside--right">不打折的价格，不打折的产品，不打折的服务，不打折的效果</div>
            </div>
            <div class="drawer-item__outside">
                <div class="drawer-item__outside--content" style="color: #3f7362;">不打折</div>
            </div>
        </div>
    </div>
</body>

</html>